<template>
    <div class="pagecomment">
        <div class="wrapper " ref="comments">
            <div class="content">
                <div class="page_image">
                    <img :src="comment['img']" alt="">
                </div>
                <p>{{ comment.title }}</p>
                <div class="price">
                    <h4>￥</h4>
                    <div class="goprice">
                        <span>{{ comment.price}}</span>
                    </div>
                    <div class="orgprice">
                        <h4>￥{{ comment.orgPrice }}</h4>
                        <h4>拼团价</h4>
                    </div>
                </div>
                <div class="noprice">免邮费</div>
                <div class="allcomment" v-if="sellcomment.gettotal">
                    <div>买家评价 {{ sellcomment.gettotal}} | 销量 {{ comment.cfav }}
                        <span>&gt;</span>
                    </div>
                </div>
                <div class="type" v-if="sellcomment.gettotal">
                    <div v-for="(item , i ) of sellcomment.getrateTags" :key="'ss'+i">
                        <div>{{ item.value}}{{item.num}}</div>
                    </div>
                </div>
                <div class="comments" v-if="sellcomment.gettotal">
                    <CommentComponent :content="sellcomment.getlist"></CommentComponent>
                </div>
                <div class="null" v-if="!sellcomment.gettotal">暂无评价</div>
            </div>
        </div>
        <CommentFoot :contentone="comment" :contenttwo="sellcomment.getlist"></CommentFoot>
    </div>
</template>

<script>
import BScroll from "better-scroll";
import CommentComponent from "./commentComponents/CommentComponent";
import CommentFoot from "./commentComponents/CommentFoot";



import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
    data() {
        return {
            comment: "",
            id: null,
            getdata: ""
        };
    },
    computed: {
        ...mapState(["sellcomment"])
    },
    methods: {
        ...mapActions(["GetComment"]),
        CommentScroll() {
            this.$nextTick(() => {
                this.scroll = new BScroll(this.$refs.comments, {
                    click: true
                });
            });
        }
    },
    components: {
        CommentComponent,
        CommentFoot
    },
    mounted() {
        this.CommentScroll();
        this.comment = this.$route.params.comment;
        this.GetComment(this.comment.tradeItemId);
    }
};
</script>

<style lang='less' scoped>
.pagecomment {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
    .wrapper {
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 100px;
        margin-left: 40px;
        .content {
            width: 100%;
            > div {
                width: 670px;
            }
            > p {
                width: 670px;
            }
            .page_image {
                text-align: center;
                margin-top: 20px;
                img {
                    width: 670px;
                    height: 810px;
                }
            }
            p {
                font-size: 32px;/*px*/
                margin-top: 20px;
            }
            .price {
                display: flex;
                margin-top: 30px;
                .goprice {
                    span {
                        font-size: 70px;
                        line-height: 60px;
                    }
                    h4 {
                        display: inline-block;
                    }
                }
            }
            .orgprice {
                margin-left: 20px;
                h4:first-child {
                    text-decoration: line-through;
                    color: #ccc;
                }
                h4:last-child {
                    background-color: rgb(255, 232, 238);
                    color: rgb(255, 34, 85);
                }
            }
            .noprice {
                margin-top: 50px;
            }
            .allcomment{
                margin-top:20px;
                span{
                    float: right;
                }
            }
            .type {
                margin-top:20px;
                > div {
                    margin-bottom: 10px;
                    margin-top: 10px;
                    margin-right:10px;
                    height: 50px;
                    text-align: center;
                    float: left;
                    > div {
                        padding-left:8px;
                        padding-right:8px;
                        border: 1px solid #ccc;
                        border-radius: 5px;
                        color: #f25;
                        background-color: #ffe8ee;
                    }
                }
            }
        }
    }
}
</style>
